<template>
  <!-- 遮罩层 -->
  <view
      class="contract-viewer-mask"
      :class="{ 'show': visible }"
      @click="handleMaskClick"
  >
    <!-- 内容区域 -->
    <view
        class="contract-container"
        :class="{ 'show': visible }"
        @click.stop
    >
      <!-- 标题栏 -->
      <view class="header">
        <text class="title">阅读并确认下列协议</text>
        <view class="close-btn" @click="close">
          <u-icon name="close" color="#999" size="20"></u-icon>
        </view>
      </view>

      <!-- 合同内容区域 -->
      <view class="content-wrapper">
        <!-- 固定高度的内容区域 -->
        <view class="fixed-content" :style="{ height: '600rpx' }">
          <scroll-view
              scroll-y
              class="contract-content"
              :style="{ height: '100%' }"
          >
            <!-- 合同内容 -->
            <view class="contract-detail" v-if="content">
              <rich-text :nodes="content"></rich-text>
            </view>
          </scroll-view>
        </view>

        <!-- 协议列表区域 -->
        <view class="agreement-section">
          <scroll-view
              scroll-y
              class="agreement-list-scroll"
              :style="{ height: (contentHeight - 600) + 'rpx' }"
          >
            <view
                v-for="(item, index) in agreements"
                :key="index"
                class="agreement-item"
                @click="selectAgreement(index)"
            >
              <text class="agreement-name" :class="{ 'active': currentIndex === index }">{{ item.name }}</text>
              <text v-if="index === 0" class="agreement-count">共{{ agreements.length }}份协议</text>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="footer">
        <button
            class="confirm-btn"
            @click="handleConfirm"
            :disabled="!currentAgreement"
            :class="{ 'disabled': !currentAgreement }"
        >
          同意并确认
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import JSZip from '@/utils/jszip.min'
import {readDocxText} from "@/utils/common";
export default {
  name: 'ContractViewer',
  props: {
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false
    },
    // 主合同标题
    mainContractTitle: {
      type: String,
      default: '委托采购合同'
    },
    webviewStyles: {
      progress: {
        color: '#FF3333'
      },
      width:'100rpx',
      height:'100rpx',
    },
    // 协议列表
    agreements: {
      type: Array,
      default: () => [
        { name: '委托采购合同', content: '' },
        { name: '委托出租合同', content: '' },
        { name: '租赁物债权转让协议', content: '' },
        { name: '委托租赁物及租金收益明细协议', content: '' }
      ]
    }
  },
  data() {
    return {
      content:'',
      currentIndex: 0,
      contentHeight: 400 // 默认高度，会在mounted中计算
    };
  },
  computed: {
    currentAgreement() {
      return this.agreements[this.currentIndex] || {};
    }
  },
  mounted() {
    this.calculateContentHeight();
    uni.onWindowResize(this.calculateContentHeight);
    this.readDocx('https://api.luqizulin.com/temp/68eb3c98635a6.docx')
  },
  beforeDestroy() {
    uni.offWindowResize(this.calculateContentHeight);
  },
  methods: {
    readDocx(url) {
      try {
        readDocxText(url).then(text=>{
          console.log(12222,text)
          this.content = text
        })
      } catch (err) {
        this.content = '读取失败：' + err.message
      }
    },
    // 计算内容区域高度
    calculateContentHeight() {
      const systemInfo = uni.getSystemInfoSync();
      // 弹窗总高度为屏幕高度的70%，减去头部和底部高度
      this.contentHeight = systemInfo.windowHeight * 0.7 - 100 - 80;
    },

    // 选择协议
    selectAgreement(index) {
      this.currentIndex = index;
      // 这里可以添加加载协议内容的逻辑
      // this.loadAgreementContent(this.agreements[index].id);
    },

    // 加载协议内容
    async loadAgreementContent(id) {
      // 实际项目中，这里应该是调用接口获取协议内容
      // const res = await getAgreementContent(id);
      // this.$set(this.agreements[this.currentIndex], 'content', res.content);
    },

    // 点击遮罩层
    handleMaskClick() {
      this.close();
    },

    // 关闭弹窗
    close() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },

    // 确认协议
    handleConfirm() {
      if (!this.currentAgreement) return;
      this.$emit('confirm', this.currentAgreement);
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-viewer-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.contract-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  &.show {
    transform: translateY(0);
  }
}

.header {
  position: relative;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  .title {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    line-height: 32rpx;
  }

  .close-btn {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    padding: 10rpx;
  }
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fixed-content {
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
}

.contract-content {
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

.agreement-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-title {
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
}

.agreement-list-scroll {
  flex: 1;
  overflow-y: auto;
}

.contract-detail {
  padding: 20rpx 0;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.main-contract {
  padding: 30rpx 0;
  text-align: center;

  .main-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.agreement-list {
  margin-bottom: 30rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  overflow: hidden;
}

.agreement-item {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;

  .agreement-name {
    flex: 1;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    line-height: 32rpx;
    color: #999999;

    &.active {
      color: #666666;
    }
  }

  .u-icon {
    margin-left: 16rpx;
  }
}

.contract-detail {
  padding: 20rpx 0 40rpx;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.footer {
  padding: 20rpx 30rpx 40rpx;

  .confirm-btn {
    height: 88rpx;
    line-height: 88rpx;
    background: #FF4400;
    border-radius: 44rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
    border: none;

    &::after {
      border: none;
    }

    &.disabled {
      opacity: 0.6;
    }
  }
}
</style>
